<!--  -->
<template>
  <div class>
    <van-nav-bar title="提现" left-arrow @click-left="onClickLeft">
      <!-- <template #right>
        <van-icon name="search" size="18" />
      </template>-->
    </van-nav-bar>

    <div class="charge_box">
      <p class="charge_tit">提现金额</p>
      <van-cell-group class="cell-group">
        <van-field v-model="charge_value" label="¥" placeholder="请输入金额" />
      </van-cell-group>
      <p class="other_money">可用余额：¥{{data.money}}</p>
    </div>
    <!-- <chargeComp :title="'提现金额'"></chargeComp> -->

    <div class="bgfff">
      <van-cell is-link @click="show = true">
        <template #title>
          <div class="pay_item">
            <img src="../../assets/vip/card.png" alt />
            <div class="pay_itemcloum">
              <p>银行卡</p>
              <p>尾号6789储蓄卡</p>
            </div>
          </div>
        </template>
      </van-cell>

      <!-- 银行卡类型选择 -->
      <van-action-sheet v-model="show" title="选择银行卡">
        <div class="content">
          <div class="card_item" v-for="(item,index) in 17" :key="index">
            <p class="bank_name">
              <span>招商银行</span>
              <span style="font-weight: 400;font-size:14px">储蓄卡</span>
            </p>
            <p class="bank_num">**** **** **** 1568</p>
          </div>
        </div>
      </van-action-sheet>

      <van-field v-model="password" type="password" label="密码" />
      <p class="forget">忘记密码?</p>

      <van-button class="btn_charge" :disabled="!password||!charge_value" type="danger" @click="showTip = true">立即提现</van-button>
    </div>
    <!-- 提现时的弹窗 -->
    <van-overlay :show="showTip"  >
      <div class="wrapper" @click.stop>
        <div class="block" >
          <van-icon class="crossSty" name="cross"  @click="showTip = false"/>
          <p class="txtTit" style="">温馨提示</p>
          <p class="txtSty">申请提现时间为:每日09:00-23:00提现申请成功提交后,将于1-20分钟内可以提现到您所绑定的银行卡账户上 </p>
          <p class="txtSty">夜间22:00-09:00期间提现申请的资金，需在09:00之后由银行联系系统自动识别提现到账 </p>
          <p class="txtSty">每笔提现金额最低200元起投 </p>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import chargeComp from "../../components/chargeComp.vue";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "cashout",
    chargeComp
  },
  data() {
    //这里存放数据
    return {
      loading: true,
      charge_value: "",
      radio: "",
      password: "",
      show: false,
      showTip: false,
      actions: [{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onClickLeft() {
      // Toast('返回');
      this.$router.go(-1);
    },

    onCancel() {
      Toast("取消");
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
/* //@import url(); 引入公共css类 */
.charge_box {
  width: 100%;
  height: 132px;
  background: #fff;
  /* border-radius: 10px; */
  /* box-shadow: 0px 20px 20px 0px #fff2f0; */
  margin: auto;
  margin-top: 15px;
}
.charge_tit {
  font-size: 16px;
  font-weight: 400;
  color: #5f5f5f;
  line-height: 22px;
  padding: 10px 10px;
}
.other_money {
  font-size: 13px;
  font-weight: 400;
  color: #ff4a35;
  line-height: 18px;
  padding: 10px 10px;
}
.cell-group {
  width: 100%;
  height: 42px;
  /* background: #f7f7f7; */
  /* border-bottom: 1px solid #f7f7f7; */
  border-radius: 3px;
  /* margin: auto; */
}
.cell-group .van-cell {
  /* border-bottom: 1px solid #f7f7f7; */
  border-radius: 4px;
}
.bgfff {
  background: #fff;
  margin-top: 15px;
  padding-bottom: 20px;
}
.bgfff .van-cell {
  align-items: center;
}
.pay_item {
  display: flex;
  align-items: center;
}
.pay_item img {
  width: 23px;
  height: 19px;
}
.pay_itemcloum {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
}
.charge_num {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 14px;
  margin-top: 20px;
}
.charge_num .item {
  /* flex: 1; */
  width: 106px;
  height: 56px;
  border: 1px solid #ebebeb;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 500;
  color: #3a3a3a;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 10px;
}
.react {
  width: 76px;
  height: 24px;
  position: absolute;
  right: 0;
  top: -12px;
  background: url("../../assets/vip/react.png") no-repeat;
  background-size: 100% 100%;
  text-align: center;
  font-size: 12px;
  color: #fff;
  line-height: 20px;
}
.pay_methods {
  padding: 0px 14px 20px 14px;
  /* margin-top: 20px; */
}
.pay_tit {
  font-size: 13px;
  font-weight: 500;
  color: #3e3e3e;
  line-height: 18px;
  padding: 20px 0;
}
.btn_charge {
  width: 318px;
  height: 50px;
  margin: auto;
  display: block;
  background: linear-gradient(180deg, #ff3927, #ff6b4f 133%);
  border-radius: 5px;
  box-shadow: 0px 2px 4px 0px #ffd9d4;
  margin-top: 100px;
}
.forget {
  font-size: 12px;
  font-weight: 400;
  text-align: right;
  color: #818181;
  padding-right: 10px;
}

.card_item {
  width: 351px;
  height: 128px;
  background: url("../../assets/vip/1.png") no-repeat;
  background-size: 100% 100%;
  margin: auto;
}
.bank_name {
  padding-left: 45px;
  padding-top: 17px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 300px;
    height: 310px;
    background-color: #fff;
    border-radius: 20px;
    position: relative;
  }
.bank_num {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  padding-top: 30px;
}
.txtTit{
color:#FF6B4F;line-height: 30px;font-size:22px;font-weight: 500;text-align:center;
padding: 15px 0;
}
.txtSty{
  width: 220px;
height: 84px;
font-size: 14px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
text-align: justify;
color: #454545;
line-height: 21px;
letter-spacing: 0px;
margin: auto;
padding: 5px 0;
}
.crossSty{
  position: absolute;color: red;
  right: 8px;
  top: 20px;
  
  z-index: 111;
}
</style>